<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-07-31 17:46:49
 * @LastEditTime: 2019-11-28 15:58:02
 * @LastEditors: Please set LastEditors
 -->
<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport"
			content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<title>Hello APP</title>
		<link rel="stylesheet" type="text/css" href="../../css/vant.css">
		<link rel="stylesheet" type="text/css" href="../../css/base.css" />
		<script src="../../static/assets/script/my-xmlhttprequest.js"></script>
		<script type="text/javascript" src="../../script/jquery.js"></script>
		<script type="text/javascript" src="../../script/layer/mobile/layer.js"></script>
		<script type="text/javascript" src="../../script/vue.min.js"></script>
		<script type="text/javascript" src="../../script/vant.min.js"></script>
		<script type="text/javascript" src="../../script/fastclick.js"></script>
		<script type="text/javascript" src="../../script/base.js"></script>
		<style type="text/css">
			.van-search {
				padding: 6px 0;
				border-bottom: 1px solid #ebedf0;
			}

			.van-search__action {
				color: #000000;
				font-size: 13px;
				font-weight: 700;
			}

			.result {
				overflow-y: auto;
				-webkit-overflow-scrolling: touch;
			}

			.desc {
				color: #969799;
			}

			.sub {
				font-size: 13px;
				color: #969799;
			}

			.checked {
				padding-left: 20px;
				min-width: 40px;
			}
		</style>
	</head>

	<body>
		<div id="app" v-cloak>
			<div class="box">
				<van-nav-bar class="head" :title="titleName" left-arrow @click-left="onClickLeft">
					<div slot="right" v-if="allowClear">
						<span @click="clear">清空</span>
					</div>
				</van-nav-bar>

				<div class="content flex-box flex-direction-c">
					<div
						v-if="(localSearch && localSearch.searchBy && localSearch.searchBy.length) || (serverSearch && serverSearch.searchKey)">
						<form action="">
							<van-search v-model="filterData[serverSearch.searchKey]" placeholder="请输入搜索关键词" show-action
								@search="getSearchList" v-if="serverSearch">
								<div slot="action" @click="getSearchList">查询</div>
							</van-search>
							<van-search v-model="localSearchKey" placeholder="请输入搜索关键词" v-on:input="filterList"
								@search="filterList" v-if="localSearch">
							</van-search>
						</form>
					</div>
					<div class="flex-main result">
						<div v-if="localSearch || (serverSearch && !serverSearch.isPaging)">
							<van-cell v-for="row in filterResult" clickable @click="selectRow(row)" v-if="!row.isHide">
								<div class="flex-box">
									<div class="flex-main">
										<div style="padding-left: 15px;word-break:break-all;">
											<div v-if="localSearch">{{row[localSearch.showText]}}</div>
											<div v-if="serverSearch">{{row[serverSearch.showText]}}</div>
											<div v-if="localSearch && localSearch.subText" class="sub">
												<div v-for="item in localSearch.subText">
													{{item.label}}：{{row[item.labelKey]}}
												</div>
											</div>
											<div v-if="serverSearch && serverSearch.subText" class="sub">
												<div v-for="item in serverSearch.subText">
													{{item.label}}：{{row[item.labelKey]}}
												</div>
											</div>

										</div>
									</div>
									<div class="checked">
										<van-checkbox shape="square" v-model="row.checked" checked-color="#51d0d0"
											v-if="row.checked">
										</van-checkbox>
									</div>
								</div>
							</van-cell>
						</div>

						<van-list v-model="listLoading" :finished="listFinished" finished-text="没有更多了"
							@load="listOnLoad" v-if="serverSearch && serverSearch.isPaging">
							<van-cell v-for="row in filterResult" clickable @click="selectRow(row)">
								<div class="flex-box">
									<div class="flex-main">
										<div style="padding-left: 15px;word-break:break-all;">
											<div>{{row[serverSearch.showText]}}</div>
											<div v-for="item in serverSearch.subText" class="sub">
												{{item.label}}：{{row[item.labelKey]}}
											</div>
										</div>
									</div>

									<div class="checked">
										<van-checkbox shape="square" v-model="row.checked" checked-color="#51d0d0"
											v-if="row.checked">
										</van-checkbox>
									</div>
								</div>
							</van-cell>
						</van-list>
					</div>
				</div>
			</div>
		</div>
	</body>

	<script type="text/javascript">
		var vm = new Vue({
			el: '#app',
			data: {
				titleName: parent.vm.baseScreenObj.type + '筛选',
				immersed: 0,
				showLoading: false,
				showMul: false,
				listLoading: false,
				listFinished: true,
				filterData: parent.vm.baseScreenObj.param,
				type: parent.vm.baseScreenObj.type,
				allowClear: parent.vm.baseScreenObj.allowClear || false,
				multiple: parent.vm.baseScreenObj.multiple || false,
				mulList: parent.vm.baseScreenObj.selectRow == null ? [] : [parent.vm.baseScreenObj.selectRow],
				cmd: parent.vm.baseScreenObj.cmd,
				filterResult: [],
				localSearchKey: '',

				localSearch: parent.vm.baseScreenObj.localSearch,
				serverSearch: parent.vm.baseScreenObj.serverSearch,

			},
			created: function() {
				console.log(23232323);
				this.getSearchList();
				// alert(this.allowClear)

				var that = this;
				console.log(JSON.stringify(that.mulList));
				// APP.ajax('Droplist_Warehouse', {}, function (res) {
				//     if (res.ds.length) {
				//         that.searchData.FWarehouseID = res.ds[0].FWarehouseID;
				//         that.searchData.FWarehouseName = res.ds[0].FWarehouseName;
				//         that.getDataList();
				//     }
				// })
				let immersed = 0;
				//获取当前手机状态栏高度
				if (window.localStorage.getItem('safeAreaInsetTop')) {
					immersed = window.localStorage.getItem('safeAreaInsetTop');
				} else {
					let ms = (/Html5Plus\/.+\s\(.*(Immersed\/(\d+\.?\d*).*)\)/gi).exec(navigator
						.userAgent);
					if (ms && ms.length >= 3) { // 当前环境为沉浸式状态栏模式
						immersed = parseFloat(ms[2]); // 获取状态栏的高度
					}
					window.localStorage.setItem('safeAreaInsetTop', immersed)

				}
				that.immersed = immersed;

				$('.head').css({
					'padding-top': that.immersed + 'px'
				});
			},
			methods: {
				filterList() {
					var that = this;
					for (var i in that.filterResult) {
						var x = 0;
						for (var j in that.localSearch.searchBy) {
							if (that.filterResult[i][that.localSearch.searchBy[j]].toUpperCase().indexOf(that
									.localSearchKey.toUpperCase()) > -1) {
								x = 1;
								that.$set(that.filterResult[i], 'isHide', false);
							}
						}
						if (x == 0) {
							that.$set(that.filterResult[i], 'isHide', true);
						}
					}
				},
				getSearchList() {
					var that = this;
					if (that.serverSearch && that.serverSearch.isPaging) {
						that.filterData[that.serverSearch.pageIndexStr] = 1;
					}
					console.log(JSON.stringify(that.cmd))
					APP.jqueryAjax(that.cmd, that.filterData, function(res) {
						console.log(JSON.stringify(res))
						// var data = res.data;
						if (that.serverSearch && that.serverSearch.isPaging) {
							that.listFinished = false;
						}
						that.filterResult = res.ds;
						that.initChecked();
					})
					// $.post(that.cmd, that.filterData, function(res) {
					// 	var data = res.data;
					// 	if (that.serverSearch && that.serverSearch.isPaging) {
					// 		that.listFinished = false;
					// 	}
					// 	that.filterResult = data.ds;
					// 	that.initChecked();
					// }, 'json')
				},
				listOnLoad() {
					var that = this;
					that.filterData[that.serverSearch.pageIndexStr]++;
					// $.post(that.cmd, that.filterData, function(res) {
					// 	var data = res.data;
					// 	that.listLoading = false;
					// 	if (data.ds.length == 0) {
					// 		that.listFinished = true;
					// 	}
					// 	that.filterResult = that.filterResult.concat(data.ds);
					// 	that.initChecked();
					// }, 'json')
					APP.jqueryAjax(that.cmd, that.filterData, function(res) {
						// var data = res.data;
						that.listLoading = false;
						if (res.ds.length == 0) {
							that.listFinished = true;
						}
						that.filterResult = that.filterResult.concat(res.ds);
						that.initChecked();
					})
				},
				deleteRow(index) {
					var that = this;
					that.mulList.splice(index, 1);
					if (!that.mulList.length) {
						that.showMul = false;
					}
					that.initChecked();
				},
				initChecked() {
					var that = this;
					for (var i in that.filterResult) {
						var x = 0;
						for (var j in that.mulList) {

							if (that.serverSearch) {
								if (that.filterResult[i][that.serverSearch.showText] == that.mulList[j][that
										.serverSearch.showText
									]) {
									x = 1;
								}
							} else if (that.localSearch) {
								if (that.filterResult[i][that.localSearch.showText] == that.mulList[j][that
										.localSearch.showText
									]) {
									x = 1;
								}

							}
						}
						if (x) {
							that.$set(that.filterResult[i], 'checked', true);
						} else {
							that.$set(that.filterResult[i], 'checked', false);
						}
					}
				},
				selectRow(row) {
					var that = this;
					if (that.multiple) {
						if (row.checked) {
							that.$set(row, 'checked', false);
							var x = 0;
							for (var i in that.mulList) {
								if (that.serverSearch) {
									if (that.mulList[i][that.serverSearch.showText] == row[that.serverSearch
											.showText]) {
										x = i;
										break;
									}
								} else if (that.localSearch) {
									if (that.mulList[i][that.localSearch.showText] == row[that.localSearch
											.showText]) {
										x = i;
										break;
									}

								}

							}
							that.mulList.splice(x, 1);
						} else {
							that.$set(row, 'checked', true);
							that.mulList.push(row);
						}
						// that.initChecked();
					} else {
						var selectRows = [];
						selectRows.push(row);
						parent.setMaterialData(vm.type, selectRows);
						parent.layer.closeAll();
					}
				},
				confirmSub() {
					parent.setMaterialData(vm.type, vm.mulList);
					parent.layer.closeAll();
				},
				clear() {
					var that = this;
					parent.setMaterialData(vm.type, []);
					parent.layer.closeAll();
				},
				onClickLeft() {
					parent.layer.closeAll();
				}
			}
		})
	</script>
</html>